<!--
<style>
    #pro{
        padding: 0px 24px !important;
    }
    #pro > span{
        font-size: 16px;
        font-weight: bold;
        top: 1rem;
        position: relative;
    }

</style>

<pro-header *ngIf="!tabShow" style="position:relative">
</pro-header>

<pro-header *ngIf="tabShow" id="pro" style="position:relative">
    <ng-template #tab>
        <span><i class="anticon anticon-pushpin-o"></i>&nbsp; {{groupName}}</span>
        <nz-tabset  style="position:relative;left: 60%;" [nzSize]="'default'"   [nzSelectedIndex]="selectIndex" (nzSelectChange)="getRouter($event)">
            <nz-tab  *ngFor="let tab of tabs;let idx = index" >
                <ng-template #nzTabHeading>
                    {{tab.name}}
                </ng-template>
            </nz-tab>
        </nz-tabset>
    </ng-template>

</pro-header>
<style>
    .ant-card {
        position: static;!important;
    }
    .ant-col-1, .ant-col-xs-1, .ant-col-sm-1, .ant-col-md-1, .ant-col-lg-1, .ant-col-2, .ant-col-xs-2, .ant-col-sm-2, .ant-col-md-2, .ant-col-lg-2, .ant-col-3, .ant-col-xs-3, .ant-col-sm-3, .ant-col-md-3, .ant-col-lg-3, .ant-col-4, .ant-col-xs-4, .ant-col-sm-4, .ant-col-md-4, .ant-col-lg-4, .ant-col-5, .ant-col-xs-5, .ant-col-sm-5, .ant-col-md-5, .ant-col-lg-5, .ant-col-6, .ant-col-xs-6, .ant-col-sm-6, .ant-col-md-6, .ant-col-lg-6, .ant-col-7, .ant-col-xs-7, .ant-col-sm-7, .ant-col-md-7, .ant-col-lg-7, .ant-col-8, .ant-col-xs-8, .ant-col-sm-8, .ant-col-md-8, .ant-col-lg-8, .ant-col-9, .ant-col-xs-9, .ant-col-sm-9, .ant-col-md-9, .ant-col-lg-9, .ant-col-10, .ant-col-xs-10, .ant-col-sm-10, .ant-col-md-10, .ant-col-lg-10, .ant-col-11, .ant-col-xs-11, .ant-col-sm-11, .ant-col-md-11, .ant-col-lg-11, .ant-col-12, .ant-col-xs-12, .ant-col-sm-12, .ant-col-md-12, .ant-col-lg-12, .ant-col-13, .ant-col-xs-13, .ant-col-sm-13, .ant-col-md-13, .ant-col-lg-13, .ant-col-14, .ant-col-xs-14, .ant-col-sm-14, .ant-col-md-14, .ant-col-lg-14, .ant-col-15, .ant-col-xs-15, .ant-col-sm-15, .ant-col-md-15, .ant-col-lg-15, .ant-col-16, .ant-col-xs-16, .ant-col-sm-16, .ant-col-md-16, .ant-col-lg-16, .ant-col-17, .ant-col-xs-17, .ant-col-sm-17, .ant-col-md-17, .ant-col-lg-17, .ant-col-18, .ant-col-xs-18, .ant-col-sm-18, .ant-col-md-18, .ant-col-lg-18, .ant-col-19, .ant-col-xs-19, .ant-col-sm-19, .ant-col-md-19, .ant-col-lg-19, .ant-col-20, .ant-col-xs-20, .ant-col-sm-20, .ant-col-md-20, .ant-col-lg-20, .ant-col-21, .ant-col-xs-21, .ant-col-sm-21, .ant-col-md-21, .ant-col-lg-21, .ant-col-22, .ant-col-xs-22, .ant-col-sm-22, .ant-col-md-22, .ant-col-lg-22, .ant-col-23, .ant-col-xs-23, .ant-col-sm-23, .ant-col-md-23, .ant-col-lg-23, .ant-col-24, .ant-col-xs-24, .ant-col-sm-24, .ant-col-md-24, .ant-col-lg-24 {
        position: static;!important;
    }
</style>
<div nz-row  [nzType]="'flex'" [nzGutter]="24">
    <div nz-col [nzSpan]="widthLeft" class="mb-md">
        <nz-card   [nzBordered]="false" style="overflow-x: auto">
            <ng-template #title>
                <div [ngClass]="{'active': !isShow}">
                    <span style="margin-left:5px" *ngIf='isShow'>工作组</span>
                </div>
            </ng-template>
            <ng-template #extra>
                <a (click)="toggleCollapsed()" [ngClass]="{'active': !isShow}">{{text}}</a>
            </ng-template>
            <ng-template #body>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent" >
                    <div *ngIf='!isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <div style = "text-align: center">
                            <i (click)="toggleCollapsed()" class="anticon anticon-menu-fold" ></i>
                            <div style="height:300px;"></div>
                        </div>
                    </div>

                </div>
                <div *ngIf='isShow' class="divDisplay" >
                    <app-tree
                        [initDate] = "treedata"
                        (develop)="Unfold($event)"
                        [searchTitle] = "searchTitle"
                        [itemsData]="treemenus"
                        (Select)="TreeSelect($event)"
                        (clickFunc)="clickFunc($event)"
                        (MenuSelect)="RightSelect($event)"
                        (dropEvent)="dropEvent($event)"
                        (serchValue)="searchVal($event)"
                        [selectionType]='selectionType'>
                    </app-tree>
                </div>
                &lt;!&ndash;</div>&ndash;&gt;
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzSpan]="widthRight" class="mb-md">
        <nz-card *ngIf="tabShow">
            <router-outlet></router-outlet>
        </nz-card>
    </div>
</div>


&lt;!&ndash; 弹出框 &ndash;&gt;
<nz-modal [nzVisible]="modalVisible" [nzMaskClosable]="false"  [nzWidth]="1024" [nzTitle]="'新增工作组'"  [nzConfirmLoading]="loading" [nzContent]="modalContent"
          (nzOnCancel)="modalVisible=false" (nzOnOk)="save()">
    <ng-template #modalContent>
        &lt;!&ndash; 主要信息 &ndash;&gt;
        <div *ngIf="!ifshow" nz-row [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="no">工作组类型:</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-select style="width:100%" [(ngModel)]="workItem.groupType" nzAllowClear name="groupType" [nzSize]="'large'" [nzPlaceHolder]="'工作组类型'" nzId="groupType">
                            <nz-option  *ngFor="let i of groupType;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                        </nz-select>

                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="no">工作组状态:</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-select [nzDisabled]="true"  style="width:100%" nzAllowClear [(ngModel)]="workItem.groupStatus"  name="groupStatus" [nzSize]="'large'" [nzPlaceHolder]="'工作组状态'" nzId="groupStatus">
                            <nz-option    *ngFor="let i of groupStatus;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="no">工作组名称:</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="workItem.groupName" name="groupName" [nzSize]="'large'" [nzPlaceHolder]="'工作组名称'" nzId="groupName"></nz-input>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label><label>所属机构:</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-select style="width:100%" [(ngModel)]="workItem.guidOrg"  nzAllowClear name="guidOrg" [nzSize]="'large'" [nzPlaceHolder]="'所属机构'" nzId="guidOrg">
                            <nz-option  *ngFor="let i of guidOrg;" [nzLabel]="i.orgName" [nzValue]="i.guid"></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            &lt;!&ndash;<div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="no">工作组代码:</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="workItem.groupCode" name="groupCode" [nzSize]="'large'" [nzPlaceHolder]="'工作组代码'" nzId="groupCode"></nz-input>
                    </div>
                </div>
            </div>&ndash;&gt;
            &lt;!&ndash;<div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="no">生效日期</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-datepicker [(ngModel)]="workItem.startDate" name="startDate" [nzSize]="'large'" [nzPlaceHolder]="'生效日期'" nzId="startDate" class="d-block"></nz-datepicker>
                    </div>
                </div>
            </div>

            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="no">失效日期</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-datepicker [(ngModel)]="workItem.endDate" name="endDate" [nzSize]="'large'" [nzPlaceHolder]="'失效日期'" nzId="endDate" class="d-block"></nz-datepicker>
                    </div>
                </div>
            </div>&ndash;&gt;
            <div nz-col [nzSpan]="24" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment">
                        <label for="no">工作组描述:</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="workItem.groupDesc" nzAutosize=true nzType="textarea" name="groupDesc" [nzSize]="'large'" [nzPlaceHolder]="'工作组描述'"
                                  nzId="groupDesc"></nz-input>
                    </div>
                </div>
            </div>

        </div>
    </ng-template>
</nz-modal>

-->


<!--模拟重写-->
<style>
    #pro{
        padding: 0px 24px !important;
    }
    #pro > span{
        font-size: 16px;
        font-weight: bold;
        top: 1rem;
        position: relative;
    }

    .ant-card {
        position: static;!important;
    }
    .ant-col-1, .ant-col-xs-1, .ant-col-sm-1, .ant-col-md-1, .ant-col-lg-1, .ant-col-2, .ant-col-xs-2, .ant-col-sm-2, .ant-col-md-2, .ant-col-lg-2, .ant-col-3, .ant-col-xs-3, .ant-col-sm-3, .ant-col-md-3, .ant-col-lg-3, .ant-col-4, .ant-col-xs-4, .ant-col-sm-4, .ant-col-md-4, .ant-col-lg-4, .ant-col-5, .ant-col-xs-5, .ant-col-sm-5, .ant-col-md-5, .ant-col-lg-5, .ant-col-6, .ant-col-xs-6, .ant-col-sm-6, .ant-col-md-6, .ant-col-lg-6, .ant-col-7, .ant-col-xs-7, .ant-col-sm-7, .ant-col-md-7, .ant-col-lg-7, .ant-col-8, .ant-col-xs-8, .ant-col-sm-8, .ant-col-md-8, .ant-col-lg-8, .ant-col-9, .ant-col-xs-9, .ant-col-sm-9, .ant-col-md-9, .ant-col-lg-9, .ant-col-10, .ant-col-xs-10, .ant-col-sm-10, .ant-col-md-10, .ant-col-lg-10, .ant-col-11, .ant-col-xs-11, .ant-col-sm-11, .ant-col-md-11, .ant-col-lg-11, .ant-col-12, .ant-col-xs-12, .ant-col-sm-12, .ant-col-md-12, .ant-col-lg-12, .ant-col-13, .ant-col-xs-13, .ant-col-sm-13, .ant-col-md-13, .ant-col-lg-13, .ant-col-14, .ant-col-xs-14, .ant-col-sm-14, .ant-col-md-14, .ant-col-lg-14, .ant-col-15, .ant-col-xs-15, .ant-col-sm-15, .ant-col-md-15, .ant-col-lg-15, .ant-col-16, .ant-col-xs-16, .ant-col-sm-16, .ant-col-md-16, .ant-col-lg-16, .ant-col-17, .ant-col-xs-17, .ant-col-sm-17, .ant-col-md-17, .ant-col-lg-17, .ant-col-18, .ant-col-xs-18, .ant-col-sm-18, .ant-col-md-18, .ant-col-lg-18, .ant-col-19, .ant-col-xs-19, .ant-col-sm-19, .ant-col-md-19, .ant-col-lg-19, .ant-col-20, .ant-col-xs-20, .ant-col-sm-20, .ant-col-md-20, .ant-col-lg-20, .ant-col-21, .ant-col-xs-21, .ant-col-sm-21, .ant-col-md-21, .ant-col-lg-21, .ant-col-22, .ant-col-xs-22, .ant-col-sm-22, .ant-col-md-22, .ant-col-lg-22, .ant-col-23, .ant-col-xs-23, .ant-col-sm-23, .ant-col-md-23, .ant-col-lg-23, .ant-col-24, .ant-col-xs-24, .ant-col-sm-24, .ant-col-md-24, .ant-col-lg-24 {
        position: static;!important;
    }

</style>

<pro-header *ngIf="!tabShow" style="position:relative">
</pro-header>

<pro-header *ngIf="tabShow" id="pro" style="position:relative">
    <ng-template #tab>
        <span><i class="anticon anticon-pushpin-o"></i>&nbsp; {{groupName}}</span>
        <nz-tabset  style="position:relative;left: 60%;" [nzSize]="'default'"   [nzSelectedIndex]="selectIndex" (nzSelectChange)="getRouter($event)">
            <nz-tab  *ngFor="let tab of tabs;let idx = index" >
                <ng-template #nzTabHeading>
                    {{tab.name}}
                </ng-template>
            </nz-tab>
        </nz-tabset>
    </ng-template>

</pro-header>
<div nz-row  [nzType]="'flex'" [nzGutter]="24">
    <div nz-col [nzSpan]="widthLeft" class="mb-md">
        <nz-card   [nzBordered]="false" style="overflow-x: auto">
            <ng-template #title>
                <div [ngClass]="{'active': !isShow}">
                    <span style="margin-left:5px" *ngIf='isShow'>工作组</span>
                </div>
            </ng-template>
            <ng-template #extra>
                <a (click)="toggleCollapsed()" [ngClass]="{'active': !isShow}">{{text}}</a>
            </ng-template>
            <ng-template #body>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent" >
                    <div *ngIf='!isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <div style = "text-align: center">
                            <i (click)="toggleCollapsed()" class="anticon anticon-menu-fold" ></i>
                            <div style="height:300px;"></div>
                        </div>
                    </div>

                </div>
                <div *ngIf='isShow' class="divDisplay" >
                    <app-tree
                        [initDate] = "treedata"
                        (develop)="Unfold($event)"
                        [searchTitle] = "searchTitle"
                        [itemsData]="treemenus"
                        (Select)="TreeSelect($event)"
                        (clickFunc)="clickFunc($event)"
                        (MenuSelect)="RightSelect($event)"
                        (dropEvent)="dropEvent($event)"
                        (serchValue)="searchVal($event)"
                        [selectionType]='selectionType'>
                    </app-tree>
                </div>
                <!--</div>-->
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzSpan]="widthRight" class="mb-md">
        <nz-card *ngIf="tabShow">
            <div *ngIf="tabId === 'info'">
                <nz-card nzTitle="工作組详情" [nzBordered]="false">
                    <div  nz-row [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
                        <div nz-col [nzSpan]="12" class="mb-md">
                            <div nz-form-item class="d-flex">
                                <div nz-form-label class="alignment" style="margin-top: 7px;margin-right: 10px;"><label for="no">工作组类型</label></div>
                                <div nz-form-control class="flex-1">
                                    <nz-select style="width:100%" [nzDisabled]="isInfoEdit" nzAllowClear [(ngModel)]="workItem.groupType"  name="groupType"
                                               [nzSize]="'large'" [nzPlaceHolder]="'工作组类型'" nzId="groupType">
                                        <nz-option  *ngFor="let i of groupType;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                                    </nz-select>

                                </div>
                            </div>
                        </div>
                        <div nz-col [nzSpan]="12" class="mb-md">
                            <div nz-form-item class="d-flex">
                                <div nz-form-label class="alignment" style="margin-top: 7px;margin-right: 10px;"><label for="no">工作组状态</label></div>
                                <div nz-form-control class="flex-1">
                                    <nz-select [nzDisabled]="isInfoEdit"  style="width:100%" nzAllowClear  [(ngModel)]="workItem.groupStatus"  name="groupStatus" [nzSize]="'large'" [nzPlaceHolder]="'工作组状态'" nzId="groupStatus">
                                        <nz-option    *ngFor="let i of groupStatus;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                                    </nz-select>
                                </div>
                            </div>
                        </div>
                        <div nz-col [nzSpan]="12" class="mb-md">
                            <div nz-form-item class="d-flex">
                                <div nz-form-label class="alignment" style="margin-top: 7px;margin-right: 10px;"><label for="no">工作组名称</label></div>
                                <div nz-form-control class="flex-1">
                                    <nz-input [(ngModel)]="workItem.groupName" [nzDisabled]="isInfoEdit" name="groupName" [nzSize]="'large'" [nzPlaceHolder]="'工作组名称'" nzId="groupName"></nz-input>
                                </div>
                            </div>
                        </div>
                        <div nz-col [nzSpan]="12" class="mb-md">
                            <div nz-form-item class="d-flex">
                                <div nz-form-label style="margin-top: 7px;margin-right: 10px;"><label>所属机构</label></div>
                                <div nz-form-control class="flex-1">
                                    <nz-select style="width:100%" [(ngModel)]="workItem.guidOrg" nzAllowClear [nzDisabled]="isInfoEdit"  name="guidOrg" [nzSize]="'large'" [nzPlaceHolder]="'所属机构'" nzId="guidOrg">
                                        <nz-option  *ngFor="let i of guidOrg;" [nzLabel]="i.orgName" [nzValue]="i.guid"></nz-option>
                                    </nz-select>
                                </div>
                            </div>
                        </div>
                        <div nz-col [nzSpan]="24" class="mb-md">
                            <div nz-form-item class="d-flex">
                                <div nz-form-label class="alignment" style="margin-top: 7px;margin-right: 10px;">
                                    <label for="no">工作组描述</label>
                                </div>
                                <div nz-form-control class="flex-1">
                                    <nz-input [(ngModel)]="workItem.groupDesc"  [nzDisabled]="isInfoEdit"  nzAutosize=true nzType="textarea" name="groupDesc" [nzSize]="'large'" [nzPlaceHolder]="'工作组描述'"
                                              nzId="groupDesc"></nz-input>
                                </div>
                            </div>
                        </div>
                        <div nz-col [nzSpan]="12"  [nzOffset]="20"  class="mb-md">
                            <ng-container *ngIf="!groupData">
                                <button style="margin-left: 2%;"  *appIf="appcofList.funcObject.group.GrouppostOpen"  (click)="openGroup()"  nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">启用</button>
                            </ng-container>
                            <ng-container  *ngIf="groupData">
                                <button style="margin-left: 2%;"  *appIf="appcofList.funcObject.group.GrouppostCancel"   (click)="cancelGroup()" nz-button type="submit" [nzType]="'danger'" [nzLoading]="loading" [nzSize]="'large'">注销</button>
                            </ng-container>
                            <ng-container *ngIf='isInfoEdit'>
                                <button style="margin-left: 2%;"  *appIf="appcofList.funcObject.group.eidtGroup" (click)="groupEdit()" nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">修改</button>
                            </ng-container>
                            <ng-container *ngIf='!isInfoEdit'>
                                <button style="margin-left: 2%;" *appIf="appcofList.funcObject.group.eidtGroup" (click)="groupSave()" nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">确定</button>
                            </ng-container>
                        </div>
                    </div>
                </nz-card>
            </div>
            <div *ngIf="tabId === 'emp'">
                <!--  form表单搜索 -->
                <form nz-form (ngSubmit)="Empsearch()" [nzLayout]="'inline'">
                    <div nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
                        <div nz-col [nzSpan]="8" class="mb-md">
                            <div nz-form-item class="d-flex">
                                <div nz-form-label><label>员工姓名</label></div>
                                <div nz-form-control class="flex-1">
                                    <nz-input [(ngModel)]="emp.empName" name="name" [nzSize]="'large'" [nzPlaceHolder]="'员工姓名'" nzId="name"></nz-input>
                                </div>
                            </div>
                        </div>
                        <div nz-col [nzSpan]="8" class="mb-md">
                            <div nz-form-item class="d-flex">
                                <div nz-form-label><label>员工编号</label></div>
                                <div nz-form-control class="flex-1">
                                    <nz-input [(ngModel)]="emp.empCode" name="numbering" [nzSize]="'large'" [nzPlaceHolder]="'角色编号'" nzId="numbering"></nz-input>
                                </div>
                            </div>
                        </div>
                        <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                            <div nz-form-item class="d-flex">
                                <div nz-form-label><label>性别</label></div>
                                <div nz-form-control class="flex-1">
                                    <nz-select style="width:100%" [(ngModel)]="emp.gender" nzAllowClear name="gender" [nzSize]="'large'" [nzPlaceHolder]="'性别'" nzId="gender">
                                        <nz-option  *ngFor="let i of gender;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                                    </nz-select>
                                </div>
                            </div>
                        </div>
                        <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                            <div nz-form-item class="d-flex">
                                <div nz-form-label><label>员工状态</label></div>
                                <div nz-form-control class="flex-1">
                                    <nz-select style="width:100%" [(ngModel)]="emp.empstatus"  nzAllowClear name="gender" [nzSize]="'large'" [nzPlaceHolder]="'员工状态'" nzId="gender">
                                        <nz-option  *ngFor="let i of empType;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                                    </nz-select>
                                </div>
                            </div>
                        </div>
                        <div nz-col [nzSpan]="expandForm ? 24 : 8" class="mb-md" [class.text-right]="expandForm">
                            <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">查询</button>
                            <button nz-button type="reset" (click)="Empreset()" [nzSize]="'large'" class="mx-sm">重置</button>
                            <a (click)="expandForm=!expandForm">
                                {{expandForm ? '收起' : '展开'}}
                                <i class="anticon" [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm"></i>
                            </a>
                        </div>
                    </div>
                </form>
                <!-- 监听列表组件，如果点击了则告诉弹出框组件，打开弹出框,监听addCreat方法-->
                <app-list (addCreat)="addEmpHandler($event)"
                          [total]="Emptotal"
                          [selectedRows]="selectedEmpRow"
                          (buttonData)="buttonEmpDataHandler($event)"
                          (buttonEvent) = "buttonEmpEvent($event)"
                          (pageNumber)="monitorEmpHandler($event)"
                          (deleatData)="deleatEmpData($event)"
                          (deleteBatch)="EmpdeleteBatch($event)"
                          [initDate] = "Empdata"
                          [buttons] = 'Empbuttons'
                          [pageindex]='emppages.pi'
                          [loading]="loading"
                          [headerDate] = "EmpoheaderData"
                          [moreData] = "EmpmoreData"
                          [configTitle]="EmpconfigTitle"
                ></app-list>
            </div>
            <div *ngIf="tabId === 'post'">
                <!--  form表单搜索 -->
                <form nz-form (ngSubmit)="postsearch()" [nzLayout]="'inline'">
                    <div nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
                        <div nz-col [nzSpan]="8" class="mb-md">
                            <div nz-form-item class="d-flex">
                                <div nz-form-label><label>岗位名称</label></div>
                                <div nz-form-control class="flex-1">
                                    <nz-input [(ngModel)]="post.positionName" name="positionName" [nzSize]="'large'" [nzPlaceHolder]="'岗位名称'" nzId="positionName"></nz-input>
                                </div>
                            </div>
                        </div>
                        <div nz-col [nzSpan]="8" class="mb-md">
                            <div nz-form-item class="d-flex">
                                <div nz-form-label><label>岗位代码</label></div>
                                <div nz-form-control class="flex-1">
                                    <nz-input [(ngModel)]="post.positionCode" name="positionCode" [nzSize]="'large'" [nzPlaceHolder]="'岗位代码'" nzId="positionCode"></nz-input>
                                </div>
                            </div>
                        </div>
                        <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                            <div nz-form-item class="d-flex">
                                <div nz-form-label><label>岗位状态</label></div>
                                <div nz-form-control class="flex-1">
                                    <nz-select style="width:100%" nzAllowClear [(ngModel)]="post.positionStatus"  name="positionStatus" [nzSize]="'large'" [nzPlaceHolder]="'岗位状态'" nzId="positionStatus">
                                        <nz-option  *ngFor="let i of postStatus;" [nzLabel]="i.itemName" [nzValue]="i.itemValue">></nz-option>
                                    </nz-select>
                                </div>
                            </div>
                        </div>

                        <div nz-col [nzSpan]="expandForm ? 24 : 8" class="mb-md" [class.text-right]="expandForm">
                            <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">查询</button>
                            <button nz-button type="reset" (click)="getPostData()" [nzSize]="'large'" class="mx-sm">重置</button>
                            <a (click)="expandForm=!expandForm">
                                {{expandForm ? '收起' : '展开'}}
                                <i class="anticon" [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm"></i>
                            </a>
                        </div>
                    </div>
                </form>
                <!-- 监听列表组件，如果点击了则告诉弹出框组件，打开弹出框,监听addCreat方法-->
                <app-list (addCreat)="addPostHandler($event)"
                          [configTitle]="configPostTitle"
                          [total]="posttotal"
                          [selectedRows]="selectedPostRows"
                          (buttonData)="buttonPostDataHandler($event)"
                          (pageNumber)="monitorPostHandler($event)"
                          (deleteBatch)="deletePostBatch($event)"
                          (isActive)="isActPostive($event)"
                          [initDate] = "postdata"
                          [headerDate] = "headerPostData"
                          [pageindex]='post.pi'
                          [moreData] = "morePostData"
                          [loading]="loading"
                          [buttons] = 'buttonsPost'
                          (buttonEvent) = "buttonPostEvent($event)"
                ></app-list>
                <!--引入列表组件-->

            </div>
            <div *ngIf="tabId === 'authority'">
                <div style="margin-top: 10px" nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
                    <div   nz-col [nzSpan]="24" class="mb-md">
                        <!--<h2>工作组{{groupGuid}}可以使用以下应用系统:</h2>-->
                        <h2>工作组可以使用以下应用系统:</h2>
                    </div>
                    <div [nzOffset]="2" nz-col [nzSpan]="24" class="mb-md">
                        <div  nz-form-item class="d-flex">
                            <div nz-form-label><label>应用系统:</label></div>
                            <div nz-form-control class="flex-1">
                                <nz-select style="width: 400px;"
                                           [nzMode]="'multiple'" nzAllowClear
                                           [nzPlaceHolder]="'增加更多可用应用'"
                                           (nzOpenChange) = 'nzOpenChange()'
                                           [(ngModel)]="selectedMultipleOptionAuth"
                                           [nzNotFoundContent]="'无法找到'"
                                           nzShowSearch>
                                    <nz-option
                                        *ngFor="let option of searchOptionsAuth"
                                        [nzLabel]="option.appName"
                                        [nzValue]="option.guid"
                                        [nzDisabled]="option.disabled">
                                    </nz-option>
                                </nz-select>
                                <button style="margin-left: 1%;"  *appIf="'Opr004016'" (click)="appAuthClick()" nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">确定</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 监听列表组件，如果点击了则告诉弹出框组件，打开弹出框,监听addCreat方法-->
                <app-list  [showAdd]="showAdd" [configTitle]="configTitle"
                           (addCreat)="addHandler($event)"
                           [selectedRows]="selectedRows"
                           (buttonData)="buttonDataHandler($event)"
                           (pageNumber)="monitorHandler($event)"
                           (selectedRow)="selectedRow($event)"
                           (isActive)="isActive($event)"
                           (deleteBatch)="deleteBatch($event)"
                           [initDate] = "data"
                           [pageindex]='pages.pi'
                           [total]="total"
                           [loading]="loading"
                           [headerDate] = "headerData"
                           [moreData] = "moreData"></app-list>
                <!--引入列表组件-->
            </div>
        </nz-card>
    </div>
</div>


<!-- 新增工作组弹出框 -->
<nz-modal [nzVisible]="GroupVisible" [nzMaskClosable]="false"  [nzWidth]="1024" [nzTitle]="'新增工作组'"  [nzConfirmLoading]="loading" [nzContent]="modalGroupContent"
          (nzOnCancel)="GroupVisible=false" (nzOnOk)="Groupsave()">
    <ng-template #modalGroupContent>
        <!-- 主要信息 -->
        <div nz-row [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="no">工作组类型:</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-select style="width:100%" [(ngModel)]="workItem.groupType" nzAllowClear name="groupType" [nzSize]="'large'" [nzPlaceHolder]="'工作组类型'" nzId="groupType">
                            <nz-option  *ngFor="let i of groupType;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                        </nz-select>

                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="no">工作组状态:</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-select [nzDisabled]="true"  style="width:100%" nzAllowClear [(ngModel)]="workItem.groupStatus"  name="groupStatus" [nzSize]="'large'" [nzPlaceHolder]="'工作组状态'" nzId="groupStatus">
                            <nz-option    *ngFor="let i of groupStatus;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="no">工作组名称:</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="workItem.groupName" name="groupName" [nzSize]="'large'" [nzPlaceHolder]="'工作组名称'" nzId="groupName"></nz-input>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label><label>所属机构:</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-select style="width:100%" [(ngModel)]="workItem.guidOrg"  nzAllowClear name="guidOrg" [nzSize]="'large'" [nzPlaceHolder]="'所属机构'" nzId="guidOrg">
                            <nz-option  *ngFor="let i of guidOrg;" [nzLabel]="i.orgName" [nzValue]="i.guid"></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="24" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment">
                        <label for="no">工作组描述:</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="workItem.groupDesc" nzAutosize=true nzType="textarea" name="groupDesc" [nzSize]="'large'" [nzPlaceHolder]="'工作组描述'"
                                  nzId="groupDesc"></nz-input>
                    </div>
                </div>
            </div>

        </div>
    </ng-template>
</nz-modal>



<!-------------------工作组员工新增------------------->

<!--新增员工弹出框信息-->
<nz-modal [nzVisible]="EmpmodalVisible" [nzMaskClosable]="false" [nzWidth]="1024" [nzTitle]="'工作组添加员工'"  [nzConfirmLoading]="loading" [nzFooter]="modalFooter"  [nzContent]="modalEmpContent"
          (nzOnCancel)="EmpmodalVisible=false" (nzOnOk)="Empsave()">
    <ng-template #modalEmpContent>
        <div style="margin-top: 10px" nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div style="margin-right: 1%;" nz-form-label><label for="itemType">添加类型:</label></div>
                    <div  nz-form-control class="flex-1">
                        <nz-radio-group [(ngModel)]="empAddType" (ngModelChange)="checkSelect(empAddType)">
                              <span  *ngFor="let i of itemType;">
                                    <label  nz-radio   [nzValue]='i.key'>
                                        <span>{{i.value}}</span>
                                    </label>
                                </span>
                        </nz-radio-group>
                    </div>
                </div>
            </div>

            <div [nzOffset]="4" nz-col [nzSpan]="16" class="mb-md" style="margin-top:10px; ">
                <div  *ngIf="empAddType==='orgEmp'" nz-form-item class="d-flex">
                    <div nz-form-label><label>添加机构员工:</label></div>
                    <div style="margin-left: 1%;margin-top:-1%" nz-form-control class="flex-1">
                        <nz-select
                            style="width: 400px;"
                            nzAllowClear
                            [nzPlaceHolder]="'Select a person'"
                            [(ngModel)]="selectedOption"
                            nzShowSearch>
                            <nz-option
                                *ngFor="let option of searchOptions"
                                [nzLabel]="option.empName"
                                [nzValue]="option.guid"
                                [nzDisabled]="option.disabled">
                            </nz-option>
                        </nz-select>
                        <button style="margin-left: 1%;" (click)="appEmpClick()" nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">确定</button>
                    </div>
                </div>

                <div  *ngIf="empAddType==='orginfoEmp'"  nz-form-item class="d-flex">
                    <div nz-form-label><label>邀请机构员工:</label></div>
                    <div style="margin-left: 1%;margin-top:-1%" nz-form-control class="flex-1">
                        <nz-select
                            style="width: 400px;"
                            nzAllowClear
                            [nzPlaceHolder]="'Select a person'"
                            [(ngModel)]="selectedOption"
                            nzShowSearch>
                            <nz-option
                                *ngFor="let option of searchOptions"
                                [nzLabel]="option.empName"
                                [nzValue]="option.guid"
                                [nzDisabled]="option.disabled">
                            </nz-option>
                        </nz-select>
                        <button style="margin-left: 1%;" (click)="invite()" nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">邀请</button>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
    <ng-template #modalFooter></ng-template>
</nz-modal>


<!----------------------------工作组岗位弹窗--------------------->
<!--弹出框信息-->
<!--新建岗位-->
<nz-modal [nzVisible]="GroupmodalVisible" [nzMaskClosable]="false"  [nzWidth]="1024" [nzTitle]="postAddEdit"  [nzConfirmLoading]="loading" [nzContent]="modalePostContent"
          [nzFooter]="modalFooter" (nzOnCancel)="canel()">
    <ng-template #modalePostContent>
        <form novalidate  (ngSubmit)="postsave()"  #f="ngForm" >
            <div nz-row [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24" >
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">岗位名称</label><span [ngClass]="{'fromErrors':positionName.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="postAdd.positionName" name="positionName" #positionName="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'岗位名称'" nzId="positionName"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="positionName.errors?.required && positionName.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须输入岗位名称
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">岗位代码</label><span [ngClass]="{'fromErrors':positionName.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="postAdd.positionCode"
                                      name="positionCode" #positionCode="ngModel"  required [nzSize]="'large'"
                                      [nzPlaceHolder]="'岗位代码'"
                                      (nzBlur)="AppCodeexit(postAddEdit, postAdd.positionCode)"
                                      nzId="positionCode"></nz-input>
                            <nz-alert *ngIf='isappcodeSlash' nzBanner nzMessage="已存在相同的岗位代码，请重新输入"></nz-alert>
                        </div>
                    </div>
                    <div *ngIf="positionCode.errors?.required && positionCode.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须输入岗位代码
                    </div>
                </div>

                <div nz-col [nzSpan]="24" class="mb-md" *ngIf="this.isEdit">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">岗位类型</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="postAdd.positionType"  nzAllowClear disabled  name="positionType" [nzSize]="'large'" [nzPlaceHolder]="'岗位类型'" nzId="positionType">
                                <nz-option   *ngFor="let i of positionType;" [nzLabel]="i.itemName" [nzValue]="i.itemValue">></nz-option>
                            </nz-select>
                        </div>
                    </div>
                </div>

                <div nz-col [nzSpan]="24" class="mb-md" *ngIf="this.isEdit">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">岗位状态</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="postAdd.positionStatus"  nzAllowClear disabled name="positionStatus" [nzSize]="'large'" [nzPlaceHolder]="'岗位状态'" nzId="positionStatus">
                                <nz-option  *ngFor="let i of postStatus;" [nzLabel]="i.itemName" [nzValue]="i.itemValue">></nz-option>
                            </nz-select>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="4" nz-form-label class="alignment"><label for="funcCode">所属岗位</label><nz-switch [(ngModel)]="parentPost" name="switch.parentPost" (ngModelChange)="switchchange('parentPost', parentPost)" nzCheckedChildren="开" nzUnCheckedChildren="关"></nz-switch></div>
                        <div nz-col [nzSpan]="12" nzOffset="0" nz-form-control *ngIf="parentPost">
                            <nz-select style="width:100%" [(ngModel)]="postAdd.guidParents" nzAllowClear name="guidParents"  [nzSize]="'large'" [nzPlaceHolder]="'所属岗位'" nzId="guidParents">
                                <nz-option  *ngFor="let i of Parentsguid;" [nzLabel]="i.positionName" [nzValue]="i.guid"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="4"   nz-form-label class="alignment"><label for="funcCode">岗位有效时间</label><nz-switch [(ngModel)]="startDate" name="switch.startDate"  (ngModelChange)="switchchange('startDate', startDate)" nzCheckedChildren="开" nzUnCheckedChildren="关"></nz-switch></div>
                        <div nz-col [nzSpan]="12" nzOffset="0" nz-form-control *ngIf="startDate">
                            <nz-datepicker [(ngModel)]="postAdd.startDate" name="startDate" [nzSize]="'large'" [nzPlaceHolder]="'岗位有效时间'" nzId="startDate" class="d-block"></nz-datepicker>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="4"   nz-form-label class="alignment"><label for="funcCode">岗位失效时间</label><nz-switch [(ngModel)]="endDate"  name="switch.endDate" (ngModelChange)="switchchange('endDate', endDate)" nzCheckedChildren="开" nzUnCheckedChildren="关"></nz-switch></div>
                        <div nz-col [nzSpan]="12" nzOffset="0" nz-form-control *ngIf="endDate">
                            <nz-datepicker [(ngModel)]="postAdd.endDate" name="endDate" [nzSize]="'large'" [nzPlaceHolder]="'岗位失效时间'" nzId="endDate" class="d-block"></nz-datepicker>
                        </div>
                    </div>
                </div>
            </div>
            <div nz-row>
                <div nz-col [nzSpan]="6" [nzOffset]="19">
                    <button style="margin-right: 16%" nz-button [nzType]="'default'" [nzSize]="'large'" (click)="GroupmodalVisible = false">
                        取 消
                    </button>
                    <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'" [disabled]="f.invalid"  [nzLoading]="isConfirmLoading">
                        提 交
                    </button>
                </div>
            </div>
        </form>
    </ng-template>
    <ng-template #modalFooter></ng-template>
</nz-modal>

<!--在岗员工数-->
<nz-modal [nzVisible]="empdistribution" [nzMaskClosable]="false"  [nzWidth]="1024" [nzTitle]="postTitle"  [nzConfirmLoading]="loading" [nzContent]="modalempdistribution"
          (nzOnCancel)="empdistribution=false" (nzOnOk)="empsave()">
    <ng-template #modalempdistribution>
        <div *ngIf='modelSelect'>
            <div style="margin-top: 10px" nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
                <div  [nzOffset]="7"  nz-col [nzSpan]="12" class="mb-md">
                    <div  nz-form-item class="d-flex">
                        <div nz-form-label><label>选择员工</label></div>
                        <div nz-form-control class="flex-1">
                            <nz-select
                                style="width: 200px;"
                                nzAllowClear
                                [nzPlaceHolder]="'增加更多员工'"
                                [(ngModel)]="selectedOption"
                                nzShowSearch>
                                <nz-option
                                    *ngFor="let option of searchOptions"
                                    [nzLabel]="option.empName"
                                    [nzValue]="option.guid"
                                    [nzDisabled]="option.disabled">
                                </nz-option>
                            </nz-select>
                            <button style="margin-left: 1%;" (click)="addEmpClick()" nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">添加员工</button>
                        </div>

                    </div>

                </div>
            </div>
            <app-list  [initDate]="empData"
                       [showAdd]="showAdd"
                       (addCreat)="addEmp($event)"
                       (buttonData)="buttonEmp($event)"
                       (pageNumber)="empHandler($event)"
                       (deleatData)="deleatEmp($event)"
                       (buttonEvent)="empEvent($event)"
                       (selectedRow)="selectedemp($event)"
                       [headerDate]="empDataheader"
                       [loading]="loading"
                       [moreData]="EmpData"
                       [total]="empTotal"></app-list>
        </div>

        <div *ngIf='!modelSelect'>
            <div style="margin-top: 10px" nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
                <div [nzOffset]="2" nz-col [nzSpan]="16" class="mb-md">
                    <div  nz-form-item class="d-flex">
                        <div nz-form-label><label>应用系统</label></div>
                        <div nz-form-control class="flex-1">
                            <nz-select style="width: 400px;" nzAllowClear
                                       [nzMode]="'multiple'"
                                       [nzPlaceHolder]="'增加更多可用应用'"
                                       [(ngModel)]="selectedMultipleOption"
                                       [nzNotFoundContent]="'无法找到'"
                                       nzShowSearch>
                                <nz-option
                                    *ngFor="let option of searchOptions"
                                    [nzLabel]="option.appName"
                                    [nzValue]="option.guid"
                                    [nzDisabled]="option.disabled">
                                </nz-option>
                            </nz-select>
                            <!--目前没有工作组下岗位应用新增的代码，先用查询的-->
                            <button style="margin-left: 1%;" *appIf="appcofList.funcObject.group.grouppostApp" (click)="appClick()" nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">确定</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 监听列表组件，如果点击了则告诉弹出框组件，打开弹出框,监听addCreat方法-->
            <app-list  [showAdd]="showAdd"
                       [configTitle]="appConfit"
                       (addCreat)="addappHandler($event)"
                       (buttonData)="buttonappDataHandler($event)"
                       (pageNumber)="monitorappHandler($event)"
                       (selectedRow)="selectedappRow($event)"
                       (deleteBatch)="deleteBatchApp($event)"
                       [initDate] = "appData"
                       (buttonEvent) = "appDel($event)"
                       [total]="Apptotal"
                       [loading]="loading"
                       [headerDate] = "AppheaderData"></app-list>
        </div>

    </ng-template>
</nz-modal>


